<template>
	<view class="page">
		<view v-for="(item, index) in photo">

			<view class="title">{{item[0]}}</view>
			<view class="date_box">
				<image class="image" mode="aspectFill" v-for="(i,j) in item" :key="ij" :src="i.path" v-if="j>=1" @click="preview(i.img)"></image>
			</view>
		</view>

		<view  @click="chooseImage">
			<view style="position: relative;">
				<!-- <u-icon class="plus" name="plus" size="120"></u-icon> -->
				<uni-fab ref="fab" :pattern="pattern" :horizontal="horizontal" :vertical="vertical" />
			</view>
		</view>
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	import {
		getQueryPhotoByAssId,
		uploadAssociationPhotos
	} from "@api"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import Vue from "vue"
	export default {
		data() {
			return {
				horizontal: 'right',
				vertical: 'bottom',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF'
				},
				associationId: '', //校友会id
				imgArr: [], //图片数组
				ImgNumber: 3, //单次可选图片个数
				urls: '', //存储图片地址
				photo: [], //存储查询的所有信息
				userInfo:{}
			}
		},
		computed: {
			...mapState(['USER'])
		},
		onLoad(option) {
			this.associationId = option.id;
			this.userInfo = this.USER.userInfo;
			var that = this;
			getQueryPhotoByAssId({id:that.associationId})
			.then(res=>{
				that.photo = that.photoDetail(res);
			})
		},
		methods: {
			preview(img) {
				uni.previewImage({
					urls: img
				})
			},
			//解析返回的数据集
			photoDetail(arr) {
				var json = {};
				for (var i = 0; i < arr.length; i++) {
					if (json[arr[i].time] == null) {
						json[arr[i].time] = [arr[i].time];						
					}
					json[arr[i].time].push({
						path: Vue.prototype.$t.URL.image + arr[i].path
					})
				}
				return json;
			},
			/** 选择图片 */
			chooseImage() {
				var that = this;
				var upload_picture_list = this.imgArr
				// console.log(this.imgArr.length)
				if (this.imgArr.length == 3) {
					uni.showToast({
						title: "最多上传3张图片",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				uni.chooseImage({
					count: this.ImgNumber - this.imgArr.length, //最多选择4张图片
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						var tempFiles = res.tempFiles
						for (var i in tempFiles) {
							tempFiles[i]['upload_percent'] = 0
							tempFiles[i]['path_server'] = ''
							that.imgArr.push(tempFiles[i])
						}
						if (res.tempFilePaths.count == 0) {
							return;
						}
						//上传图片
						//console.log("upload_picture_list:",upload_picture_list)
						that.imgArr = upload_picture_list;
						that.chooseViewShow1(); //判断是否隐藏添加
						that.uploadFile(upload_picture_list); //开始上传
						that.imgArr = [];
					}
				})
			},
			//循环上传图片
			uploadFile(imgArr) {
				//循环把图片上传到服务器  
				for (var j in imgArr) {
					if (imgArr[j]['upload_percent'] == 0) {
						this.upload_file_server(imgArr, j)
					}
				}
			},
			/** 是否隐藏图片选择 */
			chooseViewShow1() {
				if (this.imgArr.length >= this.ImgNumber) {
					this.chooseViewShow = false
				} else {
					this.chooseViewShow = true
				}
			},
			upload_file_server(upload_picture_list, j) {
				//图片上传
				let that = this;
				let userId = that.userInfo.id;
				let username = that.userInfo.username;
				uni.uploadFile({
					url: Vue.prototype.$t.URL.api + "/imgUpload/upload",
					filePath: upload_picture_list[j]['path'], //上传的文件本地地址 
					name: 'multipartFile',
					success: function(res) {
						let datas = JSON.parse(res.data);
						if (datas.errno == 0) {
							that.urls = datas.data[0];
							uploadAssociationPhotos({photoUrl:that.urls,id:that.associationId,userId:userId,username:username})
							.then(res=>{
							  getQueryPhotoByAssId({id:that.associationId})
							  .then(res=>{
							  	that.photo = that.photoDetail(res);
								uni.showToast({
									title: "上传成功，等待审核！！",
									icon: 'none',
									duration: 2000
								});
							  })
							})
						}
					},
				})
			},
			//日期转换方法
			formatDate(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return y + '.' + MM + '.' + d;
			},
		},
		components: {
			uniFab
		}
	}
</script>

<style>
	.page {
		padding: 10upx;
	}

	.title {
		margin-left: 10upx;
		font-size: 48upx;
		font-weight: bold;
	}

	.date_box {
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20upx;
	}

	.image {
		width: 200upx;
		height: 200upx;
		margin: 10upx;
		border-radius: 10upx;
		background: #dcdcdc;

	}

	.fiex {
		right: 50upx;
		bottom: 90upx;
		position: fixed;
		width: 160upx;
		height: 160upx;
		border-radius: 100%;
		background: #007AFF;
	}

	.fiex:active {
		background: #2b92ff;
	}

	.plus {
		position: absolute;
		top: 20upx;
		right: 20upx;
		color: #ffffff;
	}
</style>
